<template>
  <div class="hello">
    <h1>数据绑定</h1>

    <!--在vue中 使用双花括号可以对dom层进行数据绑定 
      可绑定的数据类型有
      props(父对子组件传参)
    data(本组件绑定属性)-->

    <br />
    <br />
    <!-- props -->
    <span>父组件传来的参数:{{msg + "，大家下午好"}}</span>
    <br />
    <br />
    <!-- data -->
    <span>自己的参数:{{data1}}</span>

    <br />
    <br />
    <br />

    <!-- v-model 双向绑定表单参数 -->
    <input
      type="text"
      placeholder="编辑我"
      class="edit"
      autofocus
      v-model="from.content"
      @keydown.enter="addTask"
    />

<van-radio-group v-model="from.radio">
  <van-radio name="1">单选框 1</van-radio>
  <van-radio name="2">单选框 2</van-radio>
</van-radio-group>

    <br />

    <button @click="printInput" >查看双向绑定</button>
    

    <br />

    <ul class="task">
      <li v-for="(item,index) in list" :key="index">
        <input @click="changeState(index)" :checked="from.finished" type="checkbox" />
        <span :class="{'finish':from.finished}">{{from.content}}</span>
        <button @click="removeList(index)" class="del">删除</button>
      </li>
    </ul>

    <br />
    <p class="empty" v-if="list.length===0">暂无内容</p>

     <br />
    <span>计算属性1：{{computedValue}}</span>


         <br />
    <span>计算属性2：{{pageStateNum}}</span>

 <br /> <br />
    <span>过滤器1：{{dateTime | parseDate}}</span>

     <br /> <br />
    <span>过滤器2：{{15 | parseMoney}}</span>

    
     <br /> <br />
     <!-- dom层节点的如果在false 的状态不存在 如果你要渲染的属性不存在之类的防止报错 应该使用v-if -->
    <span v-if="isShow=== 0">我显示了 我是用v-if控制的</span>
    <!-- <br /> <br /> -->
    <span v-else-if="isShow === 1">我显示了 我是用elif控制的</span>
    <!-- <br /> <br /> -->
     <span v-else >我显示了 我是用el控制的</span>

     <br /> <br />
     <!-- dom层节点的如果在false 的状态也存在 性能相较v-if更高（因为先渲染） -->
     <span v-show="isShow">我显示了 我是用v-show控制的</span>


     <!-- 条件渲染 -->
      <br /> <br />

      <div v-for="(item,index) in arrayList" :key="item" :index="index"> 

        <br />
        <span>{{'id:'  +item.id + ',姓名' + item.name}}</span>
                <br />

      </div>


  </div>
</template>

<script>
import { formatDate } from "../utils/util";

export default {
  name: "Demo1",
  // 属性种类1 props 父组件传参
  props: {
    msg: String

    // 类型常见如下
    /*
    id: {
      type: String,
      // 必须的属性
      required: true
    },

    // 更新页面用
    pageState: {
      type: Number,
      required: true
    },

    // 也可以接受一个对象  也就是json
    meetingData: {
      type: Object,
      required: true
    },

    // 也可以接受一个数组
    categories: {
      type: Array,
      // 必须
      required: true,
      // 默认值
      default: function() {
        return []
      }
    },
    
    */
  },
  // 属性种类2 data 内部属性
  data() {
    return {
      pageState: 0,
      data1: "我是自己的参数",
      isShow : 0,

      //默认数据
      from: {
        content: "", //初始化内容为空，不能省略
        finished: false, //未完成
        deleted: false, //未删除
        // 假如这里还有其他东西
        // 年龄
        // 性别 （0,1）
        radio: 1
        // 兴趣爱好 cheakBox
      },

      // 数组数据
      list: [],
      arrayList: [{id: '1',name:'张三'},{id: '2',name:'李四'}],

      // 用于演示计算属性和过滤器的的时间戳
      // tips 安卓的浏览器 时间戳是用的 yyyy-MM-dd
      // tips ios的浏览器 时间戳是用的 yyyy/MM/dd
      dateTime: "2020-11-20 13:14:53",

      test_data: {
        name: "John Doe",
        age: 18,
        address: { country: "china", "zip-code": "10000" }
      }
    };
  },

  // 属性种类3 computed计算属性(只有在绑定在页面的dom层上的时候才生效)
  computed: {
    pageStateNum: function() {
      console.log("pageState:" + this.pageState);
      if (this.pageState > 0) {
        this.changeData1();
      }
      return this.pageState;
    },
    // 计算属性的 getter
    computedValue: function() {
      // `this` 指向 vm 实例
      let date = new Date(this.dateTime);
      let result = formatDate(date, "yyyy年MM月dd日");
      return result;
    }
  },
  // 属性种类4 过滤器方法
  filters: {
    parseDate: function(val) {
      let date = new Date(val);
      let result = formatDate(date, "yyyy年MM月dd日");
      return result;
    },
    parseMoney: function(val) {
      return "$" + val + "美刀";
    }
  },

  // 自定义方法
  methods: {
    addTask() {
      //无论是获取
      //将任务存入数组
      //(es6 的写法)
      this.list.push(this.items);
      //重置 items
      this.items = {
        content: "", //初始化内容为空，不能省略
        finished: false, //未完成
        deleted: false //未删除
      };
    },
    //选中改变状态
    changeState(index) {
      let curState = this.list[index].finished;
      this.list[index].finished = !curState;
    },
    //删除
    removeList(index) {
      this.list.splice(index, 1);
    },
    printInput() {
      console.log("展示双向绑定:" + this.from.content);

      console.log("展示双向绑定:" + this.from.radio);
      this.pageState++;

      // bom展示与浏览器之间的交互(常见用于获取浏览器类型，或者用户滑动，弹框等作用)
      // alert("浏览器类型为："+navigator.userAgent)

      this.isShow++;
     
    },

    changeData1() {
      this.data1 = "页面状态被改变了";
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
